<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单词列表功能</title>
    <style>
        .red {
            color:red
        }
    </style>
</head>
<body>
    
    <div id="app">
        <input v-model="word" type="text" placeholder="请输入单词">

        <h1>你要输入的单词是：{{word}}</h1>
        <button @click="addWord">添加</button>
        <button @click="deleteWord">删除</button>
        
        <p>单词列表：</p>
        <ul>
            <li :class="{ red: words.length > 5 }" v-for="(wordItem, index) in words" :key="index">{{ wordItem }}</li>
        </ul>
        <p v-if="words.length > 5">单词数量太多啦</p>
    </div>
    <script src="../lib/vue.js"></script>
    <script>

        const app = Vue.createApp({
            data:function(){
                return{
                    word:'',
                    words:[]
                }
            },

            methods:{
                addWord:function(){
                    if(this.word.trim()!=''){
                        this.words.push(this.word);
                        this.word = '';
                    }
                },

                deleteWord:function(){
                    if (this.words.length > 0){
                        this.words.pop();
                    }
                }
            }
        })

        app.mount("#app")
    </script>
</body>
</html>